<template>
  <view class="record-container">
    <!-- 标题 -->
    <uni-section title="研讨间(楼层)" type="line" title-color="#0c75ff" title-font-size="22">
      <template v-slot:right>
        共
        <span class="listLength" style="color:red">{{ listLength }}</span>
        条
      </template>
    </uni-section>
    <!-- 预约记录 -->
    <view class="record-list">
      <view class="record-item" v-for="item in list" :key="item.id">
        <!-- 上下  大致信息  详情按钮-->
        <view class="record-info">
          <!-- 左右  预约信息   流程步骤 -->
          <view class="info-left">
            <view class="room">
              <!-- 返回对应房间的相关信息 -->
              {{ item.roomName }}
              <!-- (2-4人)
              <span class="floor">（4F）</span> -->
            </view>
            <view class="allowing-time">
              <!-- 返回使用的日期和时间 -->
              <uni-icons type="calendar" size="20"></uni-icons>
              <span class="date">{{ item.date }}</span>
              <span class="time">{{ item.startTime }} - {{ item.endTime }}</span>
            </view>
            <view class="application-time">
              <!-- 返回的申请时间 -->
              申请时间：
              <span>{{ item.createTime }}</span>
            </view>
          </view>
          <view class="info-right">
            <!-- 返回使用的状态 status （申请成功，使用中，已结束）-->
            <span class="success">申请成功</span>
          </view>
        </view>
        <view class="more">
          <button @click="goToRecordInfo(item.id)">详细信息</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getReservationListAysnc } from '@/api/reservation';
export default {
  data () {
    return {
      list: []
    };
  },
  created () {
    this.getReservationList()
  },
  methods: {
    goToRecordInfo (id) {
      uni.navigateTo({
        url: `/subpackage/userInfo/recordInfo?id=${id}`
      });
    },
    // 获取列表信息
    async getReservationList () {
      const res = await getReservationListAysnc(this.token)

      console.log('%c [  ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', res.data.data)
      this.list = res.data.data.map(item => {
        const time = item.createTime.toString().split('T')
        item.createTime = time[0] + " " + time[1]
        return item
      })
      this.list.reverse()

    }
  },
  computed: {
    ...mapState('user', ['token']),
    listLength () {
      return this.list.length
    }

  }
};
</script>

<style lang="scss">
.record-container {
  background-color: #fff;

  .uni-section {
    border-bottom: 1rpx solid #e2e2e2;
  }

  // 预约列表
  .record-list {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    padding: 10rpx 0;
    // 列表条目

    .record-item {
      padding: 20rpx 20rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      gap: 10rpx;

      &:not(:last-child) {
        border-bottom: 1rpx solid #cbcbcb;
      }

      .record-info {
        display: flex;
        justify-content: space-between;

        .info-left {
          display: flex;
          flex-direction: column;
          gap: 15rpx;
          justify-content: center;

          .room {
            color: #595959;

            .floor {
              font-size: 24rpx;
            }
          }

          .allowing-time {
            .date {
              margin-left: 5rpx;
            }

            .time {
              margin-left: 10rpx;
            }
          }

          .application-time {
            font-weight: 700;

            span {
              font-weight: 400;
            }
          }
        }

        .info-right {
          display: flex;
          align-items: center;

          span {

            // 不同状态颜色不一样
            &.success {
              color: #0edd20;
            }

            &.using {
              color: #c00000;
            }

            &.past {
              color: #777;
              text-decoration: line-through;
            }
          }
        }
      }

      .more {
        align-self: flex-end;

        button {
          width: 200rpx;
          height: 60rpx;
          line-height: 60rpx;
          color: #fff;
          font-size: 22rpx;
          font-weight: 700;
          letter-spacing: 5rpx;
          background-color: skyblue;
          border-radius: 40rpx;
          border: 0;
          box-shadow: 0rpx 2rpx 8rpx 0rpx darkgray;
        }
      }
    }
  }
}
</style>
